<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>账户设置</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/less/setAccount.css">
    <link href="./static/css/spop.min.css" rel="stylesheet"/>
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>
<body>
    <div id="setAccount" class="setAccount-box common-box">
        <div class="head-box">
            <div class="logo-box">
                <img class="logo" src="./static/img/logo_1.png" alt="">
                <span class="title">成都杜甫草堂博物馆综合信息管理平台</span>
            </div>
            <div class="user-box">
                <div class="name">胡奥，欢迎您</div>
                <div class="logout">
                    <span @click="logout" class="cus">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="address-box">
                <div class="address">
                    <a class="href" href="/index.html">首页</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <span>账户设置</span>
                </div>
                <div class="time">
                    {{date + '&nbsp;星期' + week + '&nbsp;' + time}}
                </div>
            </div>
            <div class="tab">
                <p class="title current">账户修改</p>
            </div>
            <div class="con-box clearfix">
                <form class="form-horizontal col-lg-8 col-md-10 col-sm-12 col-xs-12 form">
                    <!-- <div class="form-group">
                        <label for="notice" class="col-sm-3 col-md-3 col-lg-2 control-label">账户名</label>
                        <div class="col-sm-9 col-md-19">
                            <input type="text" class="form-control" id="notice" v-model="form.name">
                        </div>
                    </div> -->
                    <div class="form-group">
                        <label for="name" class="col-sm-3 col-md-3 col-lg-2 control-label">用户名</label>
                        <div class="col-sm-9 col-md-19">
                            <input type="text" class="form-control" id="name" v-model = "form.name" ref="addName" disabled>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 col-md-2 control-label">选择头像</label>
                        <div class="col-sm-9 col-md-10">
                            <div class="img-box">
                                <div class="one" :class="userSelectImg == 'head.png' ? 'current' : ''" @click="imgSelect('head.png')">
                                    <img :src="baseUrl + 'head.png'">
                                </div>
                                <div class="one" :class="userSelectImg == 'head01 (1).jpg' ? 'current' : ''" @click="imgSelect('head01 (1).jpg')">
                                    <img :src="baseUrl + 'head01 (1).jpg'">
                                </div>
                                <div class="one" :class="userSelectImg == 'head01 (2).jpg' ? 'current' : ''" @click="imgSelect('head01 (2).jpg')">
                                    <img :src="baseUrl + 'head01 (2).jpg'">
                                </div>
                                <div class="one" :class="userSelectImg == 'head01 (3).jpg' ? 'current' : ''" @click="imgSelect('head01 (3).jpg')">
                                    <img :src="baseUrl + 'head01 (3).jpg'">
                                </div>
                                <div class="one" :class="userSelectImg == 'head01 (4).jpg' ? 'current' : ''" @click="imgSelect('head01 (4).jpg')">
                                    <img :src="baseUrl + 'head01 (4).jpg'">
                                </div>
                                <div class="one" :class="userSelectImg == 'head01 (5).jpg' ? 'current' : ''" @click="imgSelect('head01 (5).jpg')">
                                    <img :src="baseUrl + 'head01 (5).jpg'">
                                </div>
                                <div class="one" v-if="userImg" :class="userSelectImg == userImg ? 'current' : ''" @click="imgSelect(userImg)">
                                    <img :src="baseUrl + userImg">
                                </div>
                                <label for="exampleInputFile" class="one filebtn cus">
                                    <input type="file" class="update" id="exampleInputFile" accept="image/*" @change="userUpdateImg($event)">
                                    自定义
                                </label>
                            </div>
                            <!-- <div class="clearfix"></div> -->
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="oldPassword" class="col-sm-3 col-md-3 col-lg-2 control-label">旧密码</label>
                        <div class="col-sm-9 col-md-19">
                            <input type="password" class="form-control" id="oldPassword" v-model="form.password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="newPassword" class="col-sm-3 col-md-3 col-lg-2 control-label">新密码</label>
                        <div class="col-sm-9 col-md-19">
                            <input type="password" class="form-control" id="newPassword" v-model="form.newPassword">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="confirm" class="col-sm-3 col-md-3 col-lg-2 control-label">确认新密码</label>
                        <div class="col-sm-9 col-md-19">
                            <input type="password" class="form-control" id="confirm" v-model="form.confirm">
                        </div>
                    </div>
                    <div class="btn-box col-sm-12 col-md-11 col-lg-11">
                        <div class="btn submit" @click="submit">提交</div>
                    </div>
                </form>
            </div>
        </div>
        <div class="footer">
            Copyright 成都杜甫草堂博物馆
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./static/js/spop.min.js"></script>
    <script>
        let userData = store.fetch('userData');
        var setAccount = new Vue({
            el: '#setAccount',
            data() {
                return {
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy年MM月dd日'),
                    week: this.timeFormat('D'),
                    userData: userData,
                    userImg: '',//用户上传图片
                    userSelectImg: userData.userHeaderImage,//用户选定图片
                    upimgurl: '',
                    form: {
                        name: userData.userName,
                        header_img: userData.userHeaderImage,
                        password: '',
                        newPassword: '',
                        confirm: '',
                    }
                }
            },
            created() {

            },
            mounted() {
                this.getDate();
            },
            methods: {
                //时间格式化
                timeFormat(fmt) {
                    let date = new Date();
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy年MM月dd日');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //选择头像
                imgSelect(imgUrl) {
                    this.userSelectImg = imgUrl;
                    this.form.header_img = imgUrl;
                },

                //用户上传头像
                userUpdateImg(e) {
                    this.imgUpload(e)
                },

                //提示通知
                通知(title,msg,type) {
                    spop({
                        template: '<h4 class="spop-title">'+title+'</h4>'+msg,
                        style: type,
                        autoclose: 3000
                    });
                },

                submit() {
                    if(!this.form.password) {
                        this.通知('错误','请填写旧密码！','error');
                        return false;
                    }
                    if(!this.form.newPassword) {
                        this.通知('错误','请填写新密码！','error');
                        return false;
                    }
                    if(this.form.newPassword !== this.form.confirm) {
                        this.通知('错误','两次输入的密码不一致请重新输入！','error');
                        return false;
                    }
                    if(this.form.newPassword === this.form.password) {
                        this.通知('错误','新密码不能和旧密码相同，请重新输入！','error');
                        return false;
                    }
                    if(this.form.password !== this.userData.password) {
                        this.通知('错误','旧密码验证失败，请确认后重新输入！','error');
                        return false;
                    }
                    let body = {
                        creatorName: this.userData.createNmae,
                        groupId: this.userData.groupId,
                        groupName: this.userData.groupName,
                        id: this.userData.id,
                        password: this.form.newPassword,
                        realName: this.userData.realName,
                        userHeader: this.form.header_img,
                        userName: this.userName
                    }
                    this.complete = false;
                    api.editUser(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            this.通知('提示','账户修改成功！本次登录即将注销，请重新登录！','success');
                            store.clear('userLoginInfo');
                            store.clear('userData')
                            setTimeout(() => {
                                window.location.href = './login.html'
                            }, 3000)
                        }else {
                            this.通知('错误','服务器开小差了请稍后再试！','error')
                        }
                    }).catch(err => {
                        this.complete = true;
                        this.通知('错误','服务器开小差了请稍后再试！','error')
                    })
                },

                //登出
                logout() {
                    store.clear('userLoginInfo');
                    store.clear('userData');
                    window.location.href = './login.html'
                }
            }
        })
    </script>
</body>
</html>